﻿@{
    Layout = "";
}

<!DOCTYPE html>

<html>
    <head>
        <title>用户信息User information</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <!-- VENDOR CSS -->
        <link rel="stylesheet" type="text/css" href="~/Content/vendor/jquery/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="~/Content/vendor/bootstrap/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="~/Content/vendor/bootstrap/bootstrap-datetimepicker.css">
        <link rel="stylesheet" type="text/css" href="~/Content/vendor/font-awesome/font-awesome.css">
        <link rel="stylesheet" type="text/css" href="~/Content/vendor/toastr/toastr.css">
        <link rel="stylesheet" type="text/css" href="~/Content/vendor/klorofil/main.css">
        <link rel="stylesheet" type="text/css" href="~/Content/aztech-style.css">

        <script type="text/javascript" src="~/Scripts/vendor/modernizr-2.6.2.js"></script>    
    </head>
    <body>

        <div id="userDetailForm" class="panel">
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="custom-tabs-line tabs-line-bottom left-aligned">
                        <ul class="nav" role="tablist">
                            <li class="active">
                                <a href="#tab-bottom-user-detail" role="tab" data-toggle="tab" aria-expanded="true">基本资料Basic information</a>
                            </li>
                            <li v-if="!isNewUser" v-on:click="ListGroup">
                                <a href="#tab-bottom-user-group" role="tab" data-toggle="tab" aria-expanded="false">用户组管理User group management</a>
                            </li>
                            <li v-if="!isNewUser" v-on:click="ListRole">
                                <a href="#tab-bottom-user-role" role="tab" data-toggle="tab" aria-expanded="false">角色管理Role management</a>
                            </li>
                            <li v-if="!isNewUser" v-on:click="ListPermission">
                                <a href="#tab-bottom-user-permission" role="tab" data-toggle="tab" aria-expanded="false">权限管理Authority management</a>
                            </li>
                        </ul>
                    </div>

                    <div class="tab-content">
                        <div id="tab-bottom-user-detail" class="tab-pane fade active in" v-if="isNotEmptyObject(user)">
                            <div id="username" class="form-group">
                                <label for="userName" class="col-sm-2 control-label">用户名user name</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" placeholder="请填写英文或数字(2~20字符间)Please fill in English or numbers (between 2 and 20 characters)" v-model="user.Name" />
                                </div>
                            </div>
                            <div id="password" class="form-group">
                                <label for="password" class="col-sm-2 control-label">密码password</label>
                                <div class="col-sm-5">
                                    <input type="password" class="form-control" placeholder="请填写密码(4~12字符间)Please fill in the password (between 4 and 12 characters)" v-model="user.Password" required />
                                    <div class="alert alert-warning alert-dismissible well-sm" role="alert" v-if="!isNewUser">
                                        <i class="fa fa-warning"></i>  默认为空，如需更换密码时请填写新密码It is blank by default. If you need to change the password, please fill in the new password。
                                    </div>
                                </div>
                            </div>
                            <div id="usernameChs" class="form-group">
                                <label for="usernameChs" class="col-sm-2 control-label">中文名Chinese name</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" placeholder="请填写中文字(2~20字符间)Please fill in Chinese characters (between 2 and 20 characters)" v-model="user.NameChs" />
                                </div>
                            </div>
                            <div id="email" class="form-group">
                                <label for="email" class="col-sm-2 control-label">邮箱mailbox</label>
                                <div class="col-sm-5">
                                    <input type="email" class="form-control" placeholder="请填写邮箱Please fill in the email" v-model="user.Email" />
                                </div>
                            </div>
                            <div id="mobile" class="form-group">
                                <label for="mobile" class="col-sm-2 control-label">电话Telephone</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" placeholder="请填写手机号或者座机号Please fill in your mobile phone number or landline number" v-model="user.Mobile" />
                                </div>
                            </div>
                            <br />
                            <div class="form-group">
                                <div class="col-xs-12 text-center">
                                    <input type="text" v-model="user.ID" hidden />
                                    <button v-if="isNewUser" class="btn btn-default" v-on:click="SaveUser">保存preservation</button>
                                    <button v-if="!isNewUser" class="btn btn-default" v-on:click="UpdateUser">更新renew</button>
                                </div>
                            </div>
                        </div>
                        <div id="tab-bottom-user-group" class="tab-pane fade" v-if="!isNewUser">
                            <div id="userGroupDetail" class="row">
                                <div class="col-xs-6" v-for="(group, index) in groupList">
                                    <label class="fancy-checkbox">
                                        <input type="checkbox" v-bind:value="group.BaseInfo.ID" />
                                        <span>{{group.BaseInfo.Name}}</span>
                                    </label>
                                </div>
                            </div>
                            <br />
                            <div class="form-group" v-if="isNotEmptyObject(groupList)">
                                <div class="col-xs-12 text-center">
                                    <button v-if="!isNewUser" class="btn btn-default" v-on:click="UpdateGroup">更新用户组renew user groups</button>
                                </div>
                            </div>
                            <br />
                            <div class="alert alert-warning alert-dismissible" role="alert">
                                <i class="fa fa-warning"></i>
                                <p>用户组是用于签核功能User groups are used for the sign off function。</p>
                            </div>
                        </div>
                        <div id="tab-bottom-user-role" class="tab-pane fade" v-if="!isNewUser">
                            <div id="userRoleDetail" class="row">
                                <div class="col-xs-12" v-for="(role, index) in roleList">
                                    <div class="row">
                                        <div class="col-xs-12 active">
                                            <label class="fancy-checkbox">
                                                <input type="checkbox" v-bind:value="role.BaseInfo.ID" />
                                                <span>{{role.BaseInfo.Name}}</span>
                                            </label>
                                        </div>
                                        <div class="col-xs-offset-1 col-xs-11">
                                            <label class="fancy-checkbox" v-if="role.SubRoles" v-for="(subRole, subIndex) in role.SubRoles">
                                                <input type="checkbox" v-bind:value="subRole.ID" />
                                                <span>{{subRole.Name}}</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="form-group" v-if="isNotEmptyObject(roleList)">
                                <div class="col-xs-12 text-center">
                                    <button v-if="!isNewUser" class="btn btn-default" v-on:click="UpdateRole">更新角色renew role</button>
                                </div>
                            </div>
                            <br />
                            <div class="alert alert-warning alert-dismissible" role="alert">
                                <i class="fa fa-warning"></i>
                                <p>角色的更新，会影响用户左边菜单栏显示或隐藏Role updates will affect the display or hiding of the menu bar on the left of the user。</p>
                                <p>如果用户的角色更新了，会在用户下一次登录时生效If the user's role is updated, it will take effect the next time the user logs in。</p>
                            </div>
                        </div>
                        <div id="tab-bottom-user-permission" class="tab-pane fade" v-if="!isNewUser">
                            <div id="userPermissionDetail" class="row">
                                <div class="col-xs-12" v-for="(permission, index) in permissionList">
                                    <div class="row">
                                        <div class="col-xs-12 active">
                                            <label class="fancy-checkbox">
                                                <input type="checkbox" v-bind:value="permission.BaseInfo.ID" />
                                                <span>{{permission.BaseInfo.Name}}</span>
                                            </label>
                                        </div>
                                        <div class="col-xs-offset-1 col-xs-11">
                                            <label class="fancy-checkbox" v-if="permission.SubPermissions" v-for="(subPermission, subIndex) in permission.SubPermissions">
                                                <input type="checkbox" v-bind:value="subPermission.ID" />
                                                <span>{{subPermission.Name}}</span>
                                            </label>
                                        </div>
                                    </div>
                                    <br />
                                </div>
                            </div>
                            <br />
                            <div class="form-group" v-if="isNotEmptyObject(permissionList)">
                                <div class="col-xs-12 text-center">
                                    <button v-if="!isNewUser" class="btn btn-default" v-on:click="UpdatePermission">更新权限renew permissions</button>
                                </div>
                            </div>
                            <br />
                            <div class="alert alert-warning alert-dismissible" role="alert">
                                <i class="fa fa-warning"></i>
                                <p>目前权限的设计，不能控制页面上的空间显示或隐藏The current permission design cannot control the display or hiding of space on the page。</p>
                                <p>用户权限的作用，是当用户操作页面数据时，服务器会判断通过，还是拒绝The function of user permission is that when the user operates the page data, the server will judge whether to pass or reject。</p>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>


        <script type="text/javascript" src="~/Scripts/vendor/jquery/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="~/Scripts/vendor/jquery/jquery.cookie.min.js"></script>
        <script type="text/javascript" src="~/Scripts/vendor/jquery/jquery.slimscroll.min.js"></script>
        <script type="text/javascript" src="~/Scripts/vendor/bootstrap/bootstrap.min.js"></script>
        <script type="text/javascript" src="~/Scripts/vendor/bootstrap/bootstrap-datetimepicker.min.js"></script>
        <script type="text/javascript" src="~/Scripts/vendor/toastr/toastr.min.js"></script>
        <script type="text/javascript" src="~/Scripts/vendor/klorofil/klorofil-common.js"></script>
        <script type="text/javascript" src="~/Scripts/vendor/respond.min.js"></script>
        <script type="text/javascript" src="~/Scripts/vendor/vue/vue.min.js"></script>
        <script type="text/javascript" src="~/Scripts/aztech-global.js?v=@DateTime.Now.ToFileTimeUtc()"></script>
        <script type="text/javascript" src="~/Scripts/aztech-script.js?v=@DateTime.Now.ToFileTimeUtc()"></script>
        <script type="text/javascript" src="~/Scripts/pageJs/Account/Detail.js?v=@DateTime.Now.ToFileTimeUtc()"></script>
    </body>
</html>

